<template>
  <!-- 高级配置 配置国际化 -->
  <a-config-provider :locale="locale">
    <!-- 布局 -->
    <a-layout class="basic-layout">
      <!-- 头部 -->
      <a-layout-header class="basic-layout-header">

      </a-layout-header>
      <!-- 中部 -->
      <a-layout>
        <!-- 侧边栏 -->
        <a-layout-sidebar class="basic-layout-sidebar">
          <div ref="handle" class="split-handle"></div>
        </a-layout-sidebar>
        <!-- 内容 -->
        <a-layout-content class="basic-layout-content">
          <keep-alive :exclude="keepAliveExcludeList">
            <router-view></router-view>
          </keep-alive>
        </a-layout-content>
      </a-layout>
      <!-- 尾部 -->
      <a-layout-footer>

      </a-layout-footer>
    </a-layout>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
export default {
  data () {
    return {
      // 中文
      locale: zhCN,
      // 哪些路由不需要缓存
      keepAliveExcludeList: ['video', 'mv', 'events']
    }
  }
}
</script>

<style lang="less" scoped>
.basic-layout {
  height: 100vh;
  .basic-layout-header,
  .basic-layout-footer {
    height: 50px;
    line-height: 50px;
    padding: 0;
    z-index: 22;
    position: relative;
  }
  .basic-layout-footer {
    border-top: 1px solid #ddd;
  }
  .basic-layout-header {
    background: @primary-color;
    color: #eee;
    -webkit-app-region: drag;
  }
  .basic-layout-sidebar {
    position: relative;
    background: none;
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: hidden;
    .split-handle {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 5px;
      border-right: 1px solid #ddd;
      cursor: col-resize;
    }
  }
  .basic-layout-content {
    background: #f5f5f7;
  }
}
</style>
